<!-- Created by henian.xu on 2021/7/9. -->

<template>
  <Page>
    <Container class="index-page">
      <Logo></Logo>
      <div class="page-title"></div>
      <div class="turntable-wrap">
        <div class="inner">
          <div
            class="turntable"
            :style="turntableStyles"
            @transitionend="onTransitionend"
          >
            <img src="@/assets/images/turntable.png" alt="turntable" />
          </div>
          <div
            class="start-btn"
            @click="
              () => {
                onPlay();
              }
            "
          ></div>
        </div>
        <!--        <div v-if="!hasWon" class="desc">1次抽奖机会</div>-->
      </div>
      <div class="rule-btn" @click="rulePopupShow = true"></div>
      <router-link
        v-if="hasWon"
        to="/giftDetail"
        class="my-gift-btn"
      ></router-link>

      <transition name="bounce">
        <div class="rule-popup" v-show="rulePopupShow">
          <div class="inner">
            <div class="content">
              <img src="@/assets/images/rule-content.png" alt="rule-content" />
            </div>

            <div class="close-btn" @click="rulePopupShow = false"></div>
          </div>
        </div>
      </transition>

      <transition name="bounce">
        <div class="fail-popup" v-show="failPopupShow">
          <div class="inner">
            <div class="content">
              <img src="@/assets/images/fail-face.png" alt="rule-content" />
            </div>

            <div class="close-btn" @click="failPopupShow = false"></div>
          </div>
        </div>
      </transition>

      <transition name="bounce">
        <div class="winning-popup" v-show="winningPopupShow">
          <div class="inner">
            <div class="content">
              <img
                class="title"
                src="@/assets/images/winning-face.png"
                alt="rule-content"
              />

              <div class="form-wrap">
                <div class="item">
                  <div class="icon">
                    <img src="@/assets/images/consignee-icon.png" alt="icon" />
                  </div>
                  <div class="label">收件人:</div>
                  <div class="input">
                    <input
                      type="text"
                      placeholder="请输入"
                      v-model="formModel.name"
                    />
                  </div>
                </div>
                <div class="item">
                  <div class="icon">
                    <img src="@/assets/images/mobile-icon.png" alt="icon" />
                  </div>
                  <div class="label">手机号:</div>
                  <div class="input">
                    <input
                      type="text"
                      placeholder="请输入"
                      v-model="formModel.phone"
                    />
                  </div>
                </div>
                <div class="item">
                  <div class="icon">
                    <img src="@/assets/images/address-icon.png" alt="icon" />
                  </div>
                  <div class="label">地址:</div>
                  <div class="input">
                    <textarea
                      rows="3"
                      placeholder="请输入"
                      v-model="formModel.address"
                    ></textarea>
                  </div>
                </div>

                <div
                  class="submit-btn"
                  @click="
                    () => {
                      onAddUserInfo();
                    }
                  "
                ></div>
              </div>
            </div>

            <div class="close-btn" @click="winningPopupShow = false"></div>
          </div>
        </div>
      </transition>
    </Container>
  </Page>
</template>

<script>
import { GlobalVar } from '@/utils';
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'IndexPage',
  data() {
    return {
      rulePopupShow: false,
      failPopupShow: false,
      winningPopupShow: false,
      isPlaying: false,
      drawIndex: 0,
      giftCount: 5,
      isDraw: null,
      formModel: {
        name: GlobalVar.isDev ? 'xhn' : '',
        phone: GlobalVar.isDev ? '18060082532' : '',
        address: GlobalVar.isDev ? '就在这里' : '',
      },
    };
  },
  computed: {
    ...mapGetters('initInfo', [
      'initInfo',
      'drawStatus',
      // add
    ]),
    hasWon() {
      return this.drawStatus === 2;
    },
    giftIntervalDeg() {
      return 360 / this.giftCount;
    },
    turntableStyles() {
      const { drawIndex, giftIntervalDeg, isPlaying } = this;
      if (!isPlaying) return {};
      const deg = drawIndex * giftIntervalDeg + 8 * 360;
      return {
        transform: `rotate(${deg}deg)`,
        transition: `transform 10s`,
      };
    },
  },
  methods: {
    ...mapActions('initInfo', {
      initInfoUpdate: 'update',
    }),
    async onPlay() {
      console.log('onPlay');
      if (this.isPlaying || this.hasWon) return;
      const { data } = await this.$http.get('/api/dell_summer21_draw/userDraw');
      console.log(data);
      this.isDraw = data.is_draw === 2;
      if (this.isDraw) {
        this.drawIndex = 0;
        await this.initInfoUpdate();
      } else {
        this.drawIndex = 1;
      }
      this.isPlaying = true;
    },
    onTransitionend() {
      console.log('onTransitionend');

      if (this.isDraw) {
        this.winningPopupShow = true;
      } else {
        this.failPopupShow = true;
      }

      setTimeout(() => {
        this.isPlaying = false;
      }, 500);
    },
    async onAddUserInfo() {
      console.log('onAddUserInfo');
      const { formModel } = this;
      if (!formModel.name) {
        return this.$messageBox.tips('收件人不能为空');
      }
      if (!formModel.phone) {
        return this.$messageBox.tips('手机号不能为空');
      }
      if (!/^1\d{10}$/.test(formModel.phone)) {
        return this.$messageBox.tips('手机号格式不确定');
      }
      if (!formModel.address) {
        return this.$messageBox.tips('地址不能为空');
      }
      const { error_msg } = await this.$http.post(
        '/api/dell_summer21_draw/addUserinfo',
        formModel,
      );
      await this.initInfoUpdate();
      this.winningPopupShow = false;
      if (error_msg) this.$messageBox.tips(error_msg);
      this.$router.push('/giftDetail');
    },
  },
};
</script>

<style lang="scss">
.index-page {
  background: transparent url('~@/assets/images/kv-bg.jpg') center top no-repeat;
  background-size: 100% auto;

  .page-title {
    margin: $margin * 2 auto;
    background: transparent url('~@/assets/images/kv-title.png') center top
      no-repeat;
    background-size: 100% auto;
    width: 501px;
    height: 194px;
  }

  .turntable-wrap {
    margin: $margin * 2 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    > .inner {
      position: relative;
      border-radius: 100vw;
      box-shadow: 6px 8px 0 0 #accd8a, 7px 9px 0 0 #313131;
      > .turntable {
        width: 475px;
        height: 475px;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      > .start-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        background: transparent url('~@/assets/images/start-btn.png') center top
          no-repeat;
        background-size: 100% auto;
        width: 95px;
        height: 114px;
        transform: translate(-50%, -50%);
      }
    }

    > .desc {
      margin-top: $margin * 2;
    }
  }

  .rule-btn {
    background: transparent url('~@/assets/images/rule-btn.png') center top
      no-repeat;
    background-size: 100% auto;
    width: 55px;
    height: 149px;
    position: absolute;
    right: 0;
    top: 200px;
  }
  .my-gift-btn {
    background: transparent url('~@/assets/images/my-gift-btn.png') center top
      no-repeat;
    background-size: 100% auto;
    width: 55px;
    height: 149px;
    position: absolute;
    right: 0;
    top: 200px + 149px + $margin;
  }

  .rule-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(#000, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    > .inner {
      position: relative;
      > .content {
        background: transparent url('~@/assets/images/popup-bg.png') left top
          repeat;
        width: 635px;
        height: 664px;
        border-radius: $padding;
        border: 1px solid #333;

        > img {
          width: 100%;
          height: 100%;
        }
      }
      > .close-btn {
        position: absolute;
        top: $padding;
        right: $padding;
        background: transparent url('~@/assets/images/close-btn.png') left top
          repeat;
        background-size: 100% 100%;
        width: 55px;
        height: 55px;
      }
    }
  }

  .fail-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(#000, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    > .inner {
      position: relative;
      > .content {
        background: transparent url('~@/assets/images/popup-bg.png') left top
          repeat;
        width: 635px;
        height: 664px;
        border-radius: $padding;
        border: 1px solid #333;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        > img {
          width: 271px;
          height: 230px;
        }
      }
      > .close-btn {
        position: absolute;
        top: $padding;
        right: $padding;
        background: transparent url('~@/assets/images/close-btn.png') left top
          repeat;
        background-size: 100% 100%;
        width: 55px;
        height: 55px;
      }
    }
  }

  .winning-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(#000, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    > .inner {
      position: relative;
      > .content {
        padding: $padding * 3;
        background: transparent url('~@/assets/images/popup-bg.png') left top
          repeat;
        width: 635px;
        min-height: 664px;
        border-radius: $padding;
        border: 1px solid #333;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        > .title {
          width: 362px;
          height: 286px;
        }

        > .form-wrap {
          width: 100%;
          margin-top: $margin;
          > .item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            padding: $padding 0;

            > .icon {
              flex: 0 0 auto;
              > img {
                width: 52px;
                height: 52px;
              }
            }
            > .label {
              flex: 0 0 auto;
              width: 5em;
              padding: 0 $padding;
              line-height: 52px;
            }
            > .input {
              flex: 1 1 1%;
              line-height: 52px;

              border: 2px solid #333;
              border-radius: $padding;
              padding: $padding-small $padding;
              background-color: #fff;

              box-shadow: 0 8px 0 -1px #fff, 0 8px 0 0 #333;

              > input,
              > textarea {
                width: 100%;
                appearance: none;
                background-color: transparent;
                outline: none;
              }
            }
          }

          > .submit-btn {
            background: transparent url('~@/assets/images/submit-btn.png') left
              top repeat;
            width: 282px;
            height: 82px;
            margin: $margin-big auto 0 auto;
            background-size: cover;
          }
        }
      }
      > .close-btn {
        position: absolute;
        top: $padding;
        right: $padding;
        background: transparent url('~@/assets/images/close-btn.png') left top
          repeat;
        background-size: 100% 100%;
        width: 55px;
        height: 55px;
      }
    }
  }
}
</style>
